<template>
  <div class="main">
    <div>
      
      <router-view></router-view>
      
    </div>

    <van-tabbar v-model="activeIndex" active-color="#0022ab" inactive-color="#888" route>
      <van-tabbar-item v-for="(item,index) in tabbarData" :key="index" :to="{name:item.routeName}">
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.Icon" />
        </template>
      </van-tabbar-item>

    </van-tabbar>

  </div>
</template>

<script>
export default {
  name: "Main",
  data(){
    return{
      activeIndex: 0,
      tabbarData:[
        {
          title:'首页',
          routeName:'Home',
          Icon:require('../assets/home.png'),
          activeIcon:require('../assets/home_active.png')
        },
        {
          title:'菜单',
          routeName:'Menu',
          Icon:require('../assets/menu.png'),
          activeIcon:require('../assets/menu_active.png')
        },
        {
          title:'订单',
          routeName:'Order',
          Icon:require('../assets/order.png'),
          activeIcon:require('../assets/order_active.png')
        },
        {
          title:'购物袋',
          routeName:'ShopBag',
          Icon:require('../assets/shopBag.png'),
          activeIcon:require('../assets/shopBag_active.png')
        },
        {
          title:'我的',
          routeName:'My',
          Icon:require('../assets/my.png'),
          activeIcon:require('../assets/my_active.png')
        }
      ]
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
